<template>
    <section>

        <!--列表-->
        <el-table :data="dataList" border highlight-current-row
                  style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="course.name" label="课程名称" min-width="150"></el-table-column>
            <el-table-column prop="course,nickname" label="别名" min-width="150"></el-table-column>
            <el-table-column prop="teacherInfoDetail.user.realname" label="课程创建人" min-width="100"></el-table-column>
            <el-table-column label="时间地点" min-width="150"></el-table-column>
            <el-table-column label="操作" min-width="250" prop="dataList">
                <template slot-scope="scope" >
                    <el-button size="mini" @click="Edit(scope.row.courseTeach.id)" icon="el-icon-edit" >编辑</el-button>
                    <el-button size="mini" @click="GoStudent(scope.row.courseTeach.id,scope.row.teacherInfoDetail.teacherInfo.id)" icon="el-icon-edit" >学生管理</el-button>
                    <el-button size="mini" @click="GoExam(scope.row.course.id,scope.row.courseTeach.id)" icon="el-icon-edit" >考试管理</el-button>
                    <!--<el-button size="mini" @click="GoTestTotal(scope.row.course.id)" icon="el-icon-edit" >成绩统计</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
                      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-sizes="pageSizes"
                           :page-size="pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--//编辑页面-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
            <el-form :model=" courseTeachDeatil" label-width="80px"  ref=" courseTeachDeatil" >
                <el-form-item label="课程名称">
                    <el-input v-model="courseTeachDeatil" ></el-input>
                </el-form-item>
                <el-form-item label="别名">
                    <el-input v-model="courseTeachDeatil" ></el-input>
                </el-form-item>
                <el-form-item label="课程创始人">
                    <el-input v-model="courseTeachDeatil" ></el-input>
                </el-form-item>
                <el-form-item label="时间地点">
                    <el-input v-model="courseTeachDeatil" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="formVisible= false">取消</el-button>
                <el-button type="primary" v-on:click="SaveEdit" :loading="submitLoading">保存</el-button>
            </div>
        </el-dialog>

        <!--认领course 界面-->
        <el-dialog :title="formTitle" :visible.sync="claimVisible" :close-on-click-modal="false">
            <el-form :model="formData2" label-width="80px"  ref="formData2" >
                <el-form-item>
                <el-input v-model="filters.keyword" placeholder="课程名" style="width:200px" clearable></el-input>
                    <el-button type="primary" v-on:click="search" icon="el-icon-search" style="margin-left: 15px;">查询
                    </el-button>
                </el-form-item>
                <el-table
                        ref="singleTable"
                        :data="options"
                        highlight-current-row
                        @current-change="selected"
                        style="width: 50%;margin-left: 80px"
                        max-height="250">
                    <el-table-column
                            type="index"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            property="course.name"
                            label="课程名称"
                            width="210">
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px;margin-left: 80px">
                    <el-button @click="setCurrent()">取消选择</el-button>
                </div>
</el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="claimVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="claimCourse" :loading="submitLoading">认领课程</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                currentRow: null,
                selectedCourseid:'',
                user:{},
                teacherid:"",
                filters: {keyword: ''},//键盘输入keyword
                options: [
                    {
                        course:{},
                        teacherInfoDetail:{},
                        courseTeach:{}
                    },

                ],
                listLoading: false, //是否显示加载动画
                submitLoading: false,
                dataList: [], //数据列表(用户)

                // 分页数据列表--start
                total: 0,
                pageIndex: 1, //页码
                pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
                pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

                // 分页数据列表--end
                action: '', // 'add'-添加，'edit'-编辑，'detail'-详情
                claimVisible:false,
                formVisible:false,
                formTitle: '', //界面标题

                courseTeachDeatil:[],
                //认领页面数据
                formData2: {
                    courseid: '',
                    teacherid:'',
                    iscreator:'2',
                },

           }
        },
        methods: {
            Edit(num){
                   this.formVisible=true;
                   console.log(this.courseTeachDeatil+"chenyuhang");

            },
            GoCourse(num){
                this.$router.push({path:'/CourseDetail',query:{courseid:num}});
            },
            GoStudent(num1,num2){
                this.$router.push({path:'/studentCourse',query:{courseteacherid:num1,teacherid:num2}});
            },
            GoExam(num1,num2){
                this.$router.push({path:'/examination',query:{courseid:num1,courseteacherid:num2 }});
            },
            /*GoTestTotal(num){
                this.$router.push({path:'/gradetotal',query:{courseid:num}});
            },*/
            handleReset() {
                this.filters.keyword = "";
                this.userState = "";
            },

            SaveEdit(){

            },
            //分页
            handleSizeChange(val) { //改变分页大小
                this.pageSize = val;
                this.getDataList();
            },
            handleCurrentChange(val) { //页码跳转
                this.pageIndex = val;
                this.getDataList();
            },
            //查询
            search() {
                let para = {
                    keyword: this.filters.keyword,
                };
                this.$http.post('api/course/findCoursesAndCreatorDetailByCondition/',para).then(res=>{
                   this.options=res.data.data;

                })

            },
            claimCourse(){
                console.log(this.selectedCourseid);
                let addData={
                    courseid: this.formData2.courseid,
                    teacherid:this.teacherid,
                    iscreator:'2',
                };
                this.$http.post('api/courseteach/add',addData);
                this.claimVisible=false;
                this.getTeacherInfo();
            },
            getTeacherInfo(){
                this.user = JSON.parse(localStorage.getItem("CurrentUser"));//获取userid
                this.$http.get('/api/teacherinfo/findTeacherByUserid/'+this.user.id).then((res) => {
                    this.teacherid = res.data.teacherInfo.id;
                    this.getDataList();
                }).catch((error) => {
                });//查询teacheridm
            },

            getDataList() { //获取数据列表（用户）
                this.listLoading = true;
                let para = {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    keyword: this.filters.keyword,
                    teacherid:this.teacherid,
                };
                this.$http.post('/api/courseteach/findByCondition', para).then(res => {
                    this.listLoading = false;
                    this.total = res.data.total;
                    this.dataList = res.data.data;
                }).catch((error) => {
                    this.listLoading = false;
                    if (error) console.log(error);
                });
                //认领课程全部课程显示
                this.$http.post('api/course/findCoursesAndCreatorDetailByCondition/','').then(res=>{
                    this.options=res.data.data;
                }).catch((error) => {
                    this.listLoading = false;


                });
            },
            handleDel: function (index, row) { //删除
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let para = {id: row.id};
                    this.$http.get('/api/user/remove/' + para.id).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                        this.getDataList();
                    });
                }).catch(() => {
                    if (error) console.log(error);
                });
            },
            onSuccess:function (response,file) {
                console.log(response);
                console.log("文件上传成功");
            },
            onError:function () {
                console.log("文件上传失败");
            },
            showEdit: function (index, row) { //显示编辑界面

                this.formVisible = true;
                this.formData = Object.assign({}, row);
                this.action = "edit";
                this.formTitle = '编辑';
            },
            saveSubmit: function () { //保存：新增/编辑
                let apiPath = '';
                if (this.action == 'add') {
                    apiPath = '/api/course/add';
                } else {
                    apiPath = '/api/user/modify';
                }

                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.submitLoading = true;

                    let para = Object.assign({}, this.formData1);

                    this.$http.post(apiPath, para).then(res => {
                        this.submitLoading = false;

                        if (res.data.code == 0) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.$refs['formData1'].resetFields();
                            this.formVisible = false;
                            this.getDataList(); //重新加载数据
                        } else {
                            this.$message({
                                message: '提交失败',
                                type: 'error'
                            });
                        }
                    }).catch((error) => {
                        this.submitLoading = false;
                        if (error) console.log(error);
                    });

                });
            },
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            selected(val) {
                this.currentRow = val;
            }
        },
        mounted() {
            this.getTeacherInfo();

        }
    }

</script>
